<template>
    <card
        :titleStyle="{
            fontSize: '13px',
            color: '#000',
            padding: '18px 0 18px 15px'
        }"
        :title="$st('wp-ke-hu-id') + ':' + item.customer_id">
        <line-cell
            :listSetProps="listprops"
            :listData="item">
        </line-cell>
        <div class="opt-box">
            <van-button
                plain
                color="#1890ff"
                @click.stop="toNewRepair(item)"
                class="btn">{{ $st('wp-li-ji-bao-xiu') }}</van-button>
        </div>
    </card>
</template>
<script>
import { useRouter } from 'vue-router';
import { reactive, toRefs } from 'vue';
import card from '@/components/_common/card.vue';
import LineCell from '@/components/_common/LineCell.vue';
import moment from 'moment';
import { selfI18n } from '@/i18n/index';

export default {
    components: {
        card,
        LineCell
    },
    props: {
        item: Object
    },
    setup (props, ctx) {
        const $st = selfI18n;
        const router = useRouter();

        const state = reactive({
            listprops: [{
                id: 'customer_name',
                label: $st('wp-ke-hu-ming-cheng')
            }, {
                id: 'contactperson',
                label: $st('wp-ke-hu-lian-xi-ren')
            }, {
                id: 'contactway',
                label: $st('wp-shou-ji-hao')
            }, {
                id: 'address',
                label: $st('wp-lian-xi-di-zhi')
            }, {
                id: 'seller_account',
                label: $st('wp-wei-bao-fu-ze-ren'),
                type: 'label-btn',
                formatter: (item) => {
                    return item.seller_name ? item.seller_account + ' (' + item.seller_name + ')' : item.seller_account;
                }
            }, {
                id: 'createtime',
                label: $st('wp-chuang-jian-shi-jian'),
                formatter: (item) => {
                    return moment(item.createtime).format('YYYY-MM-DD HH:mm:ss');
                }
            }]
        });

        const toNewRepair = (item) => {
            router.push({
                name: 'createrepairorder',
                params: {
                    customer_id: item.customer_id
                }
            });
        };

        return {
            ...toRefs(state),
            toNewRepair
        };
    }
};
</script>
<style scoped lang="scss">
.opt-box {
    padding-top: 5px;
    text-align: right;
    .btn {
        height: 30px;
        border-radius: 5px;
        border: 1px solid #1890ff;
    }
}
</style>
